<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../libs/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        td,
        th {
            text-align: center;
        }

        #root {
            width: 800px;
        }

        ul {
            margin-left: 30px;
            display: flex;
            flex-direction: column;
            position: relative;
            height: 400px;
            width: 500px;
        }

        ul li {
            margin-top: 10px;
            list-style: none;
        }

        ul button {
            width: 60px;
        }

        ul .btn-success {
            position: absolute;
            bottom: 10px;
            left: 10px;
        }

        ul .btn-primary {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        ul li span {
            font-size: 16px;
            font-weight: 700;
            margin-right: 30px;
        }

        ul li input {
            width: 400px;
            height: 30px;

        }

        .mask {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            z-index: 2;
            background: rgba(133, 130, 132, 0.4);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .wrapper {
            width: 300px;
            height: 200px;
            border-radius: 10px;
            background: white;
            display: flex;
            flex-direction: column;
        }

        .header {
            height: 35px;
            background: cornflowerblue;
            text-align: center;
        }

        .body {
            flex: 1;
        }

        .footer {
            height: 40px;
            background: cornflowerblue;
            text-align: center;
        }

        .position {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            z-index: 4;
            background: rgba(133, 130, 132, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pos {
            border-radius: 10px;
            background: cornsilk;
        }
    </style>
</head>

<body>
    <h1 style="font-size: 30px;margin:10px;">拉钩后台职位管理</h1>
    <div id="root">
        <button v-if="!nowadd" class="btn btn-primary  btn-sm" @click="current='addlist',nowadd=true">+添加</button>
        </br>
        </br>
        <component :is="currentcomponent" v-bind:name="datalist" :current="current" @back="back" @add="add">

        </component>
    </div>
    <script type=text/template id="dialog">
        <div class="mask">
            <div class="wrapper">
                 <div class="header">
                    <slot name="header"></slot>
                </div>
                <div class="body">
                    <slot></slot>
                </div>
                <div class="footer">
                    <slot name="footer">
                        <button @click="$emit('cancel')">取消</button>
                        <button @click="$emit('confirm')">确认</button>
                    </slot>
                </div>
            </div>        
        </div>   
    </script>
    <script type=text/template id="compile">
        <div  class="position">
        <ul class="pos">
            <h3>职位编辑</h3>
            <li><span>公司名称</span><input type="text" v-model="name[nowindex].comName" placeholder="请输入公司名称"></li>
            <li><span>公司职位</span><input type="text" v-model="name[nowindex].position" placeholder="请输入公司职位"></li>
            <li><span>公司地址</span><input type="text" v-model="name[nowindex].city" placeholder="请输入公司地址"></li>
            <li><span>岗位薪资</span><input type="text" v-model="name[nowindex].salary" placeholder="请输入岗位薪资"></li>
            <button class="btn btn-success " @click="$emit('posback')">返回</button>
            <button class="btn btn-primary " @click="$emit('poschange')">修改</button>
        </ul> 
    </div>   
    </script>
    <script>
        var dialog = {
            props: [],
            template: "#dialog"
        }
        var compile = {
            props: ['name', 'nowindex'],
            data() {
                return {
                    nname: '',
                    nposition: '',
                    ncity: '',
                    nsalary: ''
                }
            },
            methods: {
                savedata() {

                }
            },
            template: "#compile"
        }
        Vue.component('box', {
            props: ['name'],
            data() {
                return {
                    nowdialog: false,
                    nowindex: 10000,
                    nowup: false,

                }
            },
            components: {
                "my-dialog": dialog,
                'my-compile': compile
            },
            template: `
            <div>
                <table class="table table-striped table-dark" style="width: 80%">            
                    <thead>
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">公司名称</th>
                            <th scope="col">职位</th>
                            <th scope="col">地点</th>
                            <th scope="col">薪资</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="c,index in name">
                            <th scope="row">{{ c.id }}</th>
                            <td>{{ c.comName }}</td>
                            <td>{{ c.position }}</td>
                            <td>{{ c.city }}</td>
                            <td>{{ c.salary }}</td>
                            <td>
                                <button class="btn btn-success btn-sm" @click="updateview(c.id,index)">编辑</button>
                                <button class="btn btn-danger btn-sm" @click="del(c.id,index)">删除</button>
                            </td>
                        </tr>
                    </tbody >
                </table >
                <my-dialog v-show="nowdialog" @cancel="cancel"  @confirm="confirm">
                    确认删除吗？
                    <template #header>确认消息</template>
                </my-dialog>
                <my-compile v-show="nowup" @poschange="poschange"  @posback="posback" :name="name" :nowindex="nowindex">
                
                </my-compile>
            </div>
                `,
            methods: {
                del(id, index) {
                    this.nowdialog = !this.nowdialog;
                    this.nowindex = index;
                },
                cancel() {
                    console.log(this.nowdialog)
                    this.nowdialog = false;
                    this.nowup = false;
                },
                confirm() {
                    this.nowdialog = false;
                    return this.name.splice(this.nowindex, 1);
                },
                updateview(id, indexx) {
                    this.nowup = true;
                    this.nowindex = indexx;
                    this.nname = this.name[indexx].comName;
                    this.nposition = this.name[indexx].position;
                    this.ncity = this.name[indexx].city;
                    this.nsalary = this.name[indexx].salary;
                },
                posback() {
                    this.nowup = false;
                    this.name[this.nowindex].comName = this.nname;
                    this.name[this.nowindex].position = this.nposition;
                    this.name[this.nowindex].city = this.ncity;
                    this.name[this.nowindex].salary = this.nsalary;
                },
                poschange() {
                    this.nowup = false;
                }
            }
        })
        Vue.component('addlist', {
            props: ['name', 'ncomname', 'nposition', 'ncity', 'nsalary'],
            data() {
                return {
                    nname: '',
                    npos: '',
                    nci: '',
                    nsal: ''
                }
            },
            template:
                `
        <ul>
            <h3>职位添加</h3>
            <li><span>公司名称</span><input type="text" v-model="nname" @change="changea" placeholder="请输入公司名称"></li>
            <li><span>公司职位</span><input type="text" v-model="npos" placeholder="请输入公司职位"></li>
            <li><span>公司地址</span><input type="text" v-model="nci" placeholder="请输入公司地址"></li>
            <li><span>岗位薪资</span><input type="text" v-model="nsal" placeholder="请输入岗位薪资"></li>
            <button class="btn btn-success " @click="$emit('back')">返回</button>
            <button class="btn btn-primary" @click="$emit('add',{nname:nname,npos:npos,nci:nci,nsal:nsal})" @change="changea">提交</button>
        </ul>
                
                `,
            methods: {
                changea() {
                    ncomname = this.nname;
                    nposition = this.npos;
                    ncity = this.nci;
                    nsalary = this.nsal;
                }
            }
        })

        var vm = new Vue({
            el: '#root',
            data: {
                nowmain: false,
                nowadd: false,
                // ncomname: '',
                // nposition: '',
                // ncity: '',
                // nsalary: '',
                current: 'box',
                views: [],
                datalist: [
                    { id: '1', comName: '字节跳动', position: '前端', city: '北京', salary: "20k-100k", status: false },
                    { id: '2', comName: '沙河科技1', position: '高级前端', city: '北京', salary: "2k-100k", status: false },
                    { id: '3', comName: '沙河科技2', position: '高级前端', city: '北京', salary: "2k-100k", status: false },
                    { id: '4', comName: '沙河科技3', position: '高级前端', city: '北京', salary: "2k-100k", status: false },
                    { id: '5', comName: '沙河科技45', position: '高级前端', city: '北京', salary: "2k-100k", status: false },
                    { id: '6', comName: '沙河科技5', position: '高级前端', city: '北京', salary: "2k-100k", status: false },
                    { id: '7', comName: '沙河科技6', position: '高级前端', city: '北京', salary: "2k-100k", status: false },
                    { id: '8', comName: '东单', position: '后端', city: '北京', salary: "20k-10k", status: false }
                ]
            },
            computed: {
                currentcomponent() {
                    return this.current;
                }
            },
            methods: {
                back() {
                    console.log(this.current)
                    this.current = "box";
                    this.nowadd = false;
                },
                add(msg) {
                    this.current = "box";
                    this.nowadd = false;
                    console.log(msg);
                    return this.datalist.push({
                        id: new Date().getTime(),
                        comName: msg.nname,
                        position: msg.npos,
                        city: msg.nci,
                        salary: msg.nsal
                    })
                }

            }
        })
    </script>
</body>

</html>